<template>
    <div class="top">
        <van-search placeholder="请输入商品关键字、品牌" @click="onSearch" autocomplete="off" />
    </div>
    <!-- 轮播及模块入口展示 -->
    <div class="show">
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="item in bannerList" :key="item.id">
                <img style="height:130px;width:100%" :src="item.url" />
            </van-swipe-item>
        </van-swipe>
        <van-row class="goods-links" gutter="24" style="text-align: center;">
            <van-col span="8">
                <van-icon name="passed" />&nbsp;精选全球美食
            </van-col>
            <van-col span="8">
                <van-icon name="passed" />&nbsp;原装正品
            </van-col>
            <van-col span="8">
                <van-icon name="passed" />&nbsp;超级便宜
            </van-col>
        </van-row>
        <div class="categorymodule">
            <div>
                <span class="iconfont icon-new"></span>
                <p>新品尝鲜</p>
            </div>
            <div>
                <span class="iconfont icon-zhongzhirenzhengkouling01"></span>
                <p>兑口令</p>
            </div>
            <div>
                <span class="iconfont icon-temai"></span>
                <p>9.9元选4</p>
            </div>
            <div>
                <span class="iconfont icon-fangxinghudiejiebinggan"></span>
                <p>免费试吃</p>
            </div>
            <div>
                <span class="iconfont icon-bangdan"></span>
                <p>畅销榜</p>
            </div>
        </div>
    </div>
    <!-- 商品列表 -->
    <div clas="content">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-card v-for="item in list" :key="item.id" :price="item.price" :desc="item.detail" :title="item.product"
                :thumb="item.picture" :origin-price="item.oldprice" @click="bindGoodsDetail(item.id)">
                <template #tags>
                    <van-tag plain type="danger">乌克兰进口</van-tag>
                </template>
                <template #footer>
                    <van-icon name="shopping-cart" @click.stop="getGoodsDetailByList(item.id)" />
                    <!-- 父子元素之间事件的先后顺序 @click.stop="addGoods(item.id)"  -->
                </template>
            </van-card>
        </van-list>
    </div>
</template>

<script setup lang="ts">
import { useBanner, useGoods, useGoodsDetail } from "@/hooks/home"
import { useDetail } from '@/hooks/detail'
import { useRouter } from 'vue-router'
const { bannerList, getBanner } = useBanner()
const { list, loading, finished, onLoad } = useGoods(getBanner)
const { bindGoodsDetail } = useGoodsDetail()
const { getGoodsDetailByList } = useDetail()

// 搜索路由跳转
const router = useRouter()
const onSearch = () => {
    router.push('/search') //跳转到搜索页面
}
</script>

<style lang="scss" scoped>
.goods-links {
    margin: 10px 0;
    line-height: 20px;
    text-align: center;

    .van-cell {
        padding: 5px 5px;
        border-bottom: 1px solid #cccccc;
    }

    .van-icon {
        color: #ff5252;
    }
}

.categorymodule {
    display: flex;
    justify-content: space-around;

    //内容盒子变为弹性盒子，进行布局
    div {
        display: flex;
        flex-direction: column;
        justify-content: center;

        span {
            font-size: 24px;
            text-align: center;
            // color: #666666;
        }

        p {
            text-align: center;
            // color: #ff5252;
        }
    }

}

.van-list {
    :deep(.van-card__price) {
        div {
            color: #ff5252;
        }
    }
}

:deep(.van-card__footer) {
    color: #ff5252;
    font-size: 22px;
}
</style>